<template>
  <!-- 编辑门店 -->
  <div class="app-container shop-detail">
    <!-- <div class="head-title">{{$t('shopProcess.merchantDetail')}}</div> -->
    <!-- 导航栏 -->
    <div class="nav-box">
      <div class="nav">
        <div
          :class="['nav-item', navStatus === 0 ? 'active' : '']"
          @click="switchNav(0)"
        >
          {{ $t("shopProcess.basicInfo") }}
        </div>
        <div :class="['nav-item', navStatus === 1 ? 'active' : '']" @click="switchNav(1)">{{$t('shopProcess.businessInfo')}}</div>
        <div
          :class="['nav-item', navStatus === 2 ? 'active' : '']"
          @click="switchNav(2)"
        >
          {{ $t("shopProcess.financeInfo") }}
        </div>
        <!-- <div :class="['nav-item', navStatus === 3 ? 'active' : '']" @click="switchNav(3)">{{$t('outlet.permission')}}</div> -->
        <div
          :class="['nav-item', navStatus === 4 ? 'active' : '']"
          @click="switchNav(4)"
        >
          {{ $t("shopProcess.signingInfo") }}
        </div>
      </div>
    </div>
    <!-- 模块 -->
    <div class="shop-info-box">
      <!-- 基本信息 -->
      <div v-if="navStatus === 0" class="basic-info-mod">
        <!-- 店铺审核状态 -->
        <div class="audit-status">
          <div v-if="shopBasicInfo" class="audit-item">
            <span>{{ $t("shopProcess.auditStatus") }}：</span>
            <span v-if="shopBasicInfo.accountStatus === -1">{{
              $t("shop.failed")
            }}</span>
            <span
              v-else-if="
                shopBasicInfo.accountStatus === 0 ||
                shopBasicInfo.shopProcessStatus === 4 ||
                shopBasicInfo.shopProcessStatus === 6
              "
              >{{ $t("shop.pendingReview") }}</span
            >
            <span v-else-if="shopBasicInfo.shopProcessStatus === 3">{{
              $t("brand.brandOffline")
            }}</span>
            <span v-else-if="shopBasicInfo.shopProcessStatus === 5">{{
              $t("brand.platformOffline")
            }}</span>
            <span
              v-else-if="
                shopBasicInfo.accountStatus === 1 ||
                shopBasicInfo.accountStatus === 0
              "
              >{{ $t("shop.passed") }}</span
            >
          </div>
          <div class="audit-item">
            <span>{{ $t("shopProcess.accountStatus") }}：</span>
            <span v-if="shopBasicInfo.accountStatus === 0">{{
              $t("shopProcess.disable")
            }}</span>
            <span v-else-if="shopBasicInfo.accountStatus === 1">{{
              $t("shopProcess.enable")
            }}</span>
            <span v-else-if="shopBasicInfo.accountStatus === -1">{{
              $t("shopProcess.delete")
            }}</span>
          </div>
          <div class="audit-item">
            <!-- 状态shopProcessStatus(-1, "开店申请未通过" 0, "开店申请待审核" 1, "停业中" 2, "营业中" 3, "门店下线" 4, "门店下线待审核" 5, "平台下线" 6, "平台下线待审核") -->
            <span>{{ $t("outlet.outletStatus") }}：</span>
            <span v-if="shopBasicInfo.shopProcessStatus === -1">{{
              $t("shopProcess.applyFail")
            }}</span>
            <span v-else-if="shopBasicInfo.shopProcessStatus === 0">{{
              $t("shopProcess.storeOpenPendingReview")
            }}</span>
            <span v-else-if="shopBasicInfo.shopProcessStatus === 1">{{
              $t("brand.closed")
            }}</span>
            <span v-else-if="shopBasicInfo.shopProcessStatus === 2">{{
              $t("brand.inOperation")
            }}</span>
            <span v-else-if="shopBasicInfo.shopProcessStatus === 3">{{
              $t("brand.brandOffline")
            }}</span>
            <span v-else-if="shopBasicInfo.shopProcessStatus === 4">{{
              $t("brand.brandOfflineToBeReviewed")
            }}</span>
            <span v-else-if="shopBasicInfo.shopProcessStatus === 5">{{
              $t("brand.platformOffline")
            }}</span>
            <span v-else-if="shopBasicInfo.shopProcessStatus === 6">{{
              $t("brand.platformOfflineToBeReviewed")
            }}</span>
          </div>
        </div>
        <!-- 信息 -->
        <div class="basic-info-list">
          <el-form
            @submit.native.prevent
            ref="shopBasicInfo"
            label-width="120px"
            :model="shopBasicInfo"
            :rules="shopBasicInfoRules"
            size="small"
          >
            <div class="basic-info-box">
              <div class="left-info">
                <!-- 门店图片Logo -->
                <el-form-item
                  :label="this.$i18n.t('outlet.shopLogo')"
                  prop="shopLogo"
                >
                  <p class="txt">
                    <ImgUpload
                      v-model="shopBasicInfo.shopLogo"
                      :limit="1"
                      :prompt="false"
                      @input="imgsChange"
                    />


                    <!-- <DirectImgUpload
                      :modelValue.sync="shopBasicInfo.shopLogo"
                      :limit="1"
                      :prompt="false"
                      @input="imgsChange"
                    /> -->
                  </p>
                </el-form-item>

                <el-form-item
                  :label="this.$i18n.t('outlet.outletName')"
                  prop="shopName"
                >
                  <p class="txt">
                    <el-input
                      v-model="shopBasicInfo.shopName"
                      :placeholder="this.$i18n.t('outlet.outletFormTip1')"
                      maxlength="10"
                      @blur="
                        shopBasicInfo.shopName = shopBasicInfo.shopName
                          ? removeHeadAndTailSpaces(shopBasicInfo.shopName)
                          : shopBasicInfo.shopName
                      "
                    />
                  </p>
                </el-form-item>

                <el-form-item
                  :label="$t('outlet.shopAppName')"
                  prop="shopAppName"
                >
                  <p class="txt">
                    <el-input
                      v-model="shopBasicInfo.shopAppName"
                      :placeholder="$t('tip.input')"
                      maxlength="20"
                      @blur="
                        shopBasicInfo.shopAppName = shopBasicInfo.shopAppName
                          ? removeHeadAndTailSpaces(shopBasicInfo.shopAppName)
                          : shopBasicInfo.shopAppName
                      "
                    />
                  </p>
                </el-form-item>

                <!-- 品牌tag -->
            <el-form-item :label="$t('outlet.brandTagId')" prop="brandTagId">
              <p class="txt">
                <el-select
                  filterable
                  v-model="shopBasicInfo.brandTagId"
                  :placeholder="$t('outlet.brandTagId')"
                >
                  <el-option
                    v-for="item in brandTagList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>
              </p>
            </el-form-item>

                <el-form-item
                  :label="this.$i18n.t('outlet.shopLocation')"
                  prop="airportShopAddressObj"
                >
                  <el-cascader
                    style="width: 100%"
                    v-model="
                      shopBasicInfo.airportShopAddressObj.airportShopAddressIds
                    "
                    ref="CascaderShopLocation"
                    :options="shopLocationOptions"
                    :props="shopLocationProps"
                    @change="handleShopLocationChange"
                  >
                  </el-cascader>
                </el-form-item>

                <el-form-item
                  :label="this.$i18n.t('outlet.outletId')"
                  prop="shopCode"
                >
                  <p class="txt">
                    <el-input
                      oninput="value=value.replace(/[\W]/g,'')"
                      v-model="shopBasicInfo.shopCode"
                      :placeholder="this.$i18n.t('outlet.outletFormTip2')"
                      maxlength="10"
                      @blur="
                        shopBasicInfo.shopCode = shopBasicInfo.shopCode
                          ? removeHeadAndTailSpaces(shopBasicInfo.shopCode)
                          : shopBasicInfo.shopCode
                      "
                    />
                  </p>
                </el-form-item>
                <!-- <el-form-item v-if="currentFlag" :label="this.$i18n.t('outlet.addr')" prop="currentAddr">
              <el-cascader
                ref="cascaderAddr"
                v-model="shopBasicInfo.currentAddr"
                :props="addrListTreeProps"
                :placeholder="this.$i18n.t('shopProcess.addrInputTips')"
                class="addr-select"
                @change="handleAddrChange"
              />
            </el-form-item> -->
                <el-form-item
                  :label="this.$i18n.t('outlet.detailAddr')"
                  prop="shopAddress"
                >
                  <el-input
                    v-model="shopBasicInfo.shopAddress"
                    :placeholder="
                      this.$i18n.t('shopProcess.detailAddrInputTips')
                    "
                    maxlength="50"
                    @blur="
                      shopBasicInfo.shopAddress = shopBasicInfo.shopAddress
                        ? removeHeadAndTailSpaces(shopBasicInfo.shopAddress)
                        : shopBasicInfo.shopAddress
                    "
                  />
                </el-form-item>
                <!-- 地图 -->
                <el-form-item style="display: none;">
                  <baidu-map
                    ref="baiduMp"
                    class="map"
                    :scroll-wheel-zoom="false"
                    :center="center"
                    @moving="syncCenterAndZoom"
                    @moveend="syncCenterAndZoom"
                    @zoomend="syncCenterAndZoom"
                    @ready="handler"
                    :zoom="zoom"
                  >
                    <bm-navigation
                      anchor="BMAP_ANCHOR_TOP_RIGHT"
                    ></bm-navigation>
                    <bm-marker
                      :position="center"
                      :dragging="false"
                      @click="infoWindowOpen"
                    >
                      <bm-info-window
                        :show="show"
                        @close="infoWindowClose"
                        @open="infoWindowOpen"
                        >{{ $t("shop.storeLocation") }}</bm-info-window
                      >
                    </bm-marker>
                  </baidu-map>
                </el-form-item>

                <el-form-item
                  :label="this.$i18n.t('outlet.userName')"
                  prop="userName"
                  required
                >
                  <p class="txt">
                    <el-input
                      v-model="shopBasicInfo.userName"
                      disabled
                      maxlength="11"
                      :placeholder="this.$i18n.t('outlet.loginUserNameTip')"
                    />
                  </p>
                </el-form-item>
                <el-form-item
                  :label="this.$i18n.t('brand.contactName')"
                  prop="shopOwner"
                >
                  <p class="txt">
                    <el-input
                      v-model="shopBasicInfo.shopOwner"
                      maxlength="20"
                      :placeholder="this.$i18n.t('brand.contactNameInputTip')"
                    />
                  </p>
                </el-form-item>
                <el-form-item
                  :label="this.$i18n.t('shopProcess.tel')"
                  prop="tel"
                >
                  <p class="txt">
                    <el-input
                      v-model="shopBasicInfo.tel"
                      maxlength="11"
                      :placeholder="this.$i18n.t('shopProcess.telInputTips')"
                    />
                  </p>
                </el-form-item>
                <el-form-item
                  :label="this.$i18n.t('shopProcess.email')"
                  prop="email"
                >
                  <p class="txt">
                    <el-input
                      v-model="shopBasicInfo.email"
                      :placeholder="this.$i18n.t('shopProcess.emailInputTips')"
                      maxlength="30"
                    />
                  </p>
                </el-form-item>
                <el-form-item
                  :label="this.$i18n.t('outlet.businTime')"
                  required
                >
                  <p class="busin-time">
                    <el-form-item prop="openTime">
                      <el-time-picker
                        v-model="shopBasicInfo.openTime"
                        :placeholder="$t('text.startTime')"
                        format="HH:mm"
                        value-format="HH:mm:ss"
                      >
                      </el-time-picker>
                    </el-form-item>
                    &nbsp;{{ $t("text.to") }}&nbsp;
                    <el-form-item prop="closeTime">
                      <el-time-picker
                        v-model="shopBasicInfo.closeTime"
                        :placeholder="$t('text.endTime')"
                        format="HH:mm"
                        value-format="HH:mm:ss"
                      >
                      </el-time-picker>
                    </el-form-item>
                  </p>
                </el-form-item>
                <el-form-item
                  :label="this.$i18n.t('outlet.businStatus')"
                  prop="shopStatus"
                >
                  <p class="txt">
                    <el-radio
                      v-model="shopBasicInfo.shopStatus"
                      :disabled="
                        !(
                          shopBasicInfo.shopProcessStatus === 2 ||
                          shopBasicInfo.shopProcessStatus === 1
                        )
                      "
                      :label="1"
                      >{{ $t("outlet.normal") }}</el-radio
                    >
                    <el-radio
                      v-model="shopBasicInfo.shopStatus"
                      :disabled="
                        !(
                          shopBasicInfo.shopProcessStatus === 2 ||
                          shopBasicInfo.shopProcessStatus === 1
                        )
                      "
                      :label="0"
                      >{{ $t("outlet.close") }}</el-radio
                    >
                  </p>
                </el-form-item>
                <el-form-item
                  :label="this.$i18n.t('outlet.outletService')"
                  prop="serviceIds"
                >
                  <p class="txt" v-if="shopBasicInfo">
                    <el-checkbox-group
                      v-if="serviceList && serviceList.length"
                      v-model="shopBasicInfo.serviceIds"
                    >
                      <el-checkbox
                        v-for="item in serviceList"
                        :key="item.id"
                        :label="item.id"
                        >{{ item.name }}</el-checkbox
                      >
                    </el-checkbox-group>
                    <span v-else> -- </span>
                  </p>
                </el-form-item>
              </div>
            </div>
          </el-form>
        </div>

        <div class="default-btn primary-btn foot-btn" @click="updateShopInfo">
          {{ $t("shopProcess.saveBasicInfo") }}
        </div>
      </div>
      <!-- /基本信息 -->

      <!-- 工商信息 -->
      <div v-if="navStatus === 1" class="business-info-mod">
        <el-form
          @submit.native.prevent
          ref="companyInfoForm"
          :model="companyInfoForm"
          :rules="companyInfoRule"
          :label-width="lang === 'en' ? '200px' : '150px'"
          size="small"
        >
          <div class="ci-wrapper">
            <div class="left-info">
              <el-form-item
                :label="this.$i18n.t('outlet.operatingPeriod')"
                :rules="{
                  required: true,
                  message: this.$i18n.t('outlet.operatingTip'),
                }"
              >
                <div style="display: flex">
                  <el-date-picker
                    v-model="companyInfoForm.startTime"
                    style="width: 162px"
                    type="date"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    :placeholder="this.$i18n.t('shopProcess.startTime')"
                    :clearable="false"
                  />
                  <span style="margin: 0 10px">-</span>
                  <span class="end-time">
                    <el-date-picker
                      ref="endTime"
                      v-model="companyInfoForm.endTime"
                      style="width: 162px"
                      type="date"
                      value-format="yyyy-MM-dd HH:mm:ss"
                      :placeholder="
                        endTimeFlag && !companyInfoForm.endTime
                          ? ''
                          : this.$i18n.t('shopProcess.endTime')
                      "
                      clearable
                      @change="endTimeFlag = false"
                      @focus="endTimeFlag = false"
                    />
                    <span
                      v-if="endTimeFlag && !companyInfoForm.endTime"
                      class="text"
                      @click="focusEndTime"
                    >
                      {{ this.$i18n.t("shopProcess.noFixedTerm") }}
                    </span>
                  </span>
                </div>
              </el-form-item>

              <el-form-item
                :label="this.$i18n.t('shopProcess.businessLicense')"
                prop="businessLicense"
              >
                <div class="business-license-box">
                  <div class="license-content">
                    <img-upload
                      v-model="companyInfoForm.businessLicense"
                      class="img-upload"
                    />
                    <div class="example-box">
                      <img
                        src="~@/assets/img/example-img/Business-license.png"
                      />
                      <div class="tips">{{ $t("shopProcess.example") }}</div>
                    </div>
                  </div>
                  <div class="upload-tips">
                    {{ $t("shopProcess.logoTips") }}
                  </div>
                </div>
              </el-form-item>
              <div class="id-box">
                <div class="upload-content">
                  <div
                    class="upload-img"
                    :class="lang === 'en' ? 'en-upload-img' : 'zh-upload-img'"
                  >
                    <el-form-item
                      class="idcard"
                      :label="this.$i18n.t('shopProcess.corporateIdentityCard')"
                      prop="identityCardFront"
                    >
                      <img-upload
                        v-model="companyInfoForm.identityCardFront"
                        class="img-upload"
                      />
                    </el-form-item>
                    <el-form-item
                      class="idcard"
                      label-width="0px"
                      prop="identityCardLater"
                    >
                      <img-upload
                        v-model="companyInfoForm.identityCardLater"
                        class="img-upload"
                      />
                    </el-form-item>
                  </div>
                  <div
                    :class="
                      $t('language') === 'English'
                        ? 'en-upload-example'
                        : 'upload-example'
                    "
                  >
                    <div class="example-box">
                      <img src="~@/assets/img/example-img/idcard1.png" />
                      <div class="tips">
                        {{ $t("shopProcess.identityCardFront") }}
                      </div>
                    </div>
                    <div class="example-box">
                      <img src="~@/assets/img/example-img/idcard2.png" />
                      <div class="tips">
                        {{ $t("shopProcess.identityCardLater") }}
                      </div>
                    </div>
                  </div>
                  <div class="upload-tips">
                    {{ $t("shopProcess.identityCardTips") }}
                  </div>
                </div>
              </div>
            </div>
          </div>
        </el-form>
        <div
          class="default-btn primary-btn"
          :class="lang === 'en' ? 'en-foot-btn' : 'foot-btn'"
          @click="updateShopInfo"
        >
          {{ $t("shopProcess.saveCompanyInfo") }}
        </div>
      </div>
      <!-- /工商信息 -->

      <!-- 财务信息 -->
      <div v-if="navStatus === 2" class="financial-info">
        <div class="table-data-title">
          <div class="text">
            <span class="asterisk">*</span
            >{{ $t("shopProcess.settlementAccount") }}
          </div>
          <div class="tips">
            {{ $t("shopProcess.added") }}
            <span class="txt-bold">{{ settlementAccounts.length }}</span>
            {{ $t("shopProcess.piece")
            }}{{ $t("shopProcess.settlementAccount") }},{{
              $t("shopProcess.mostAdd")
            }}
            <span class="txt-bold">1</span>
            {{ $t("shopProcess.piece")
            }}{{ $t("shopProcess.settlementAccount") }}
          </div>
        </div>
        <div class="table-box">
          <el-table
            :data="settlementAccounts"
            header-cell-class-name="table-header"
            style="width: 100%"
          >
            <el-table-column
              prop="bankName"
              :label="this.$i18n.t('shopProcess.bankName')"
            />
            <el-table-column
              prop="recipientName"
              :label="this.$i18n.t('shopProcess.recipientName')"
            />
            <el-table-column
              prop="cardNo"
              :label="this.$i18n.t('shopProcess.account')"
            />
            <el-table-column
              prop="openingBank"
              :label="this.$i18n.t('shopProcess.openingBank')"
            />
            <el-table-column
              prop="isDefault"
              :label="this.$i18n.t('shopProcess.masterAccount')"
              align="center"
            >
              <template slot-scope="scope">
                {{
                  scope.row.isDefault
                    ? $t("shopProcess.yes")
                    : $t("shopProcess.no")
                }}
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <!-- /财务信息 -->
      <!-- 权限设置 -->
      <div v-if="navStatus === 3" class="content-wrap">
        <div>
          <el-form
            @submit.native.prevent
            ref="shopSetForm"
            :model="outletSetList"
            :label-width="$t('language') === 'English' ? '280px' : '140px'"
            size="small"
          >
            <div class="ci-wrapper">
              <div>
                <!-- 门店自定义装修 -->
                <el-form-item
                  :label="$t('outlet.storeCustomDecoration')"
                  prop="customRenovation"
                >
                  <div class="txt">
                    <el-radio-group
                      v-model="outletSetList.customRenovation"
                      :disabled="true"
                    >
                      <el-radio :label="1">{{
                        $t("outlet.startUsing")
                      }}</el-radio>
                      <el-radio :label="0">{{ $t("outlet.close") }}</el-radio>
                    </el-radio-group>
                  </div>
                  <div class="tips">{{ $t("outlet.outletTip6") }}</div>
                </el-form-item>
                <!-- 门店自定义运费 -->
                <el-form-item
                  :label="$t('outlet.storeCustomShippingCharges')"
                  prop="customFreightAmount"
                >
                  <div class="txt">
                    <el-radio-group
                      v-model="outletSetList.customFreightAmount"
                      :disabled="true"
                    >
                      <el-radio :label="1">{{
                        $t("outlet.startUsing")
                      }}</el-radio>
                      <el-radio :label="0">{{ $t("outlet.close") }}</el-radio>
                    </el-radio-group>
                  </div>
                  <div class="tips">{{ $t("outlet.outletTip2") }}</div>
                </el-form-item>
                <!-- 门店自建营销活动 -->
                <el-form-item
                  :label="$t('outlet.storesBuildTheirOwnMarketingActivities')"
                  prop="customSales"
                >
                  <div class="txt">
                    <el-radio-group
                      v-model="outletSetList.customSales"
                      :disabled="true"
                    >
                      <el-radio :label="1">
                        {{ $t("outlet.startUsing") }}</el-radio
                      >
                      <el-radio :label="0"> {{ $t("outlet.close") }}</el-radio>
                    </el-radio-group>
                  </div>
                  <div class="tips">{{ $t("outlet.outletTip3") }}</div>
                </el-form-item>
                <!-- 门店自行管理商品 -->
                <el-form-item
                  :label="$t('outlet.storesManageTheirOwnMerchandise')"
                  prop="customProd"
                >
                  <div class="txt">
                    <el-radio-group
                      v-model="outletSetList.customProd"
                      :disabled="true"
                    >
                      <el-radio :label="1">
                        {{ $t("outlet.startUsing") }}</el-radio
                      >
                      <el-radio :label="0"> {{ $t("outlet.close") }}</el-radio>
                    </el-radio-group>
                  </div>
                  <div class="tips">{{ $t("outlet.outletTip4") }}</div>
                </el-form-item>
              </div>
            </div>
          </el-form>
        </div>
      </div>
      <div v-if="navStatus === 4" class="content-wrap">
        <signing-edit :brandId="brandId" />
      </div>
    </div>
  </div>
</template>

<script>
  import ImgUpload from "@/components/img-upload";
  import signingEdit from "./signing-edit.vue";
  import {
    validEmail,
    validNoEmptySpace,
    removeHeadAndTailSpaces,
  } from "@/utils/validate";
  import moment from "moment";
  export default {
    components: {
      ImgUpload,
      signingEdit,
    },
    data() {
      const validateMobile = (rule, value, callback) => {
        let phoneReg = /^(?:(?:\d{3}-)?\d{8}|^(?:\d{4}-)?\d{7,8})(?:-\d+)?$/;
        let mobile = /^(?:(?:\+|00)86)?1\d{10}$/;
        if (phoneReg.test(value) || mobile.test(value)) {
          callback();
        } else {
          callback(new Error(this.$i18n.t("shopProcess.telErrorTips")));
        }
      };
      const validateEmail = (rule, value, callback) => {
        if (!validEmail(value) || value.indexOf(" ") !== -1) {
          callback(new Error(this.$i18n.t("shopProcess.emailErrorTips")));
        } else {
          callback();
        }
      };
      const validateNotEmpty = (role, value, callback) => {
        if (validNoEmptySpace(value)) {
          callback(new Error(this.$i18n.t("shopProcess.inputAllSpace")));
        } else {
          callback();
        }
      };
      const validShopLocation = (rule, value, callback) => {
        if (
          value &&
          value.airportShopAddressIds &&
          value.airportShopAddressIds.length
        ) {
          callback();
        } else {
          return callback(new Error(this.$i18n.t("tip.select")));
        }
      };
      return {
        removeHeadAndTailSpaces: removeHeadAndTailSpaces,
        resourcesUrl: process.env.VUE_APP_RESOURCES_URL,
        shopId: this.$route.query.shopId || 0,
        isSubmit: false,
        navStatus: 0,

        // 语言
        lang: window.localStorage.getItem("o2oLang"),

        // 店铺状态
        shopStatus: {},

        // 店铺基本信息
        brandId: "",
        shopBasicInfo: {
          airportShopAddressObj: {},
        },
        shopBasicInfoRules: {
          // shopCode: [
          // // { required: true, message: this.$i18n.t('outlet.outletNameNotEmpty'), trigger: 'blur' },
          // { validator: validateNotEmpty, trigger: 'blur' }
          // ],
          shopName: [
            {
              required: true,
              message: this.$i18n.t("outlet.shopCodeNotEmpty"),
              trigger: "blur",
            },
            {
              min: 2,
              max: 20,
              message: this.$i18n.t("outlet.outletNameErrorTips"),
              trigger: "blur",
            },
            { validator: validateNotEmpty, trigger: "blur" },
          ],
          shopAppName: [
            {
              required: true,
              message: this.$t("shopProcess.shopNoNull"),
              trigger: "blur",
            },
          ],
          brandTagId:[
            {
              required: true,
              message: this.$t("shopProcess.brandNoNull"),
              trigger: ["blur", "change"],
            },
          ],
          tel: [
            {
              required: true,
              message: this.$i18n.t("shopProcess.telNotEmpty"),
              trigger: "blur",
            },
            { validator: validateMobile, trigger: "blur" },
          ],
          email: [
            {
              required: true,
              message: this.$i18n.t("shopProcess.emailInputTips"),
              trigger: "blur",
            },
            { validator: validateEmail, trigger: "blur" },
          ],
          currentAddr: [
            {
              required: true,
              message: this.$i18n.t("shopProcess.addrInputTips"),
              trigger: ["blur", "change"],
            },
          ],
          shopAddress: [
            {
              required: true,
              message: this.$i18n.t("shopProcess.detailAddrNotEmpty"),
              trigger: "blur",
            },
            { validator: validateNotEmpty, trigger: "blur" },
          ],
          openTime: [
            {
              required: true,
              message: this.$i18n.t("outlet.seleBusTime"),
              trigger: "change",
            },
          ],
          closeTime: [
            {
              required: true,
              message: this.$i18n.t("outlet.seleBusTime"),
              trigger: "change",
            },
          ],
          shopStatus: [
            {
              required: true,
              message: this.$i18n.t("outlet.pleaseSelectShopStatus"),
              trigger: "change",
            },
          ],
          userName: [
            {
              required: true,
              message: this.$i18n.t("outlet.loginUserNameTip"),
              trigger: "blur",
            },
          ],
          shopOwner: [
            {
              required: true,
              message: this.$i18n.t("brand.contactNameNotEmpty"),
              trigger: "blur",
            },
          ],
          airportShopAddressObj: [
            {
              required: true,
              validator: validShopLocation,
              trigger: "change",
            },
          ],
          // shopLogo: [
          //   { required: true, message: this.$i18n.t('shopProcess.logoNotEmpty'), trigger: 'change' }
          // ],
          // businessLicense: [
          // // { required: true, message: this.$i18n.t('shopProcess.businessLicenseNotEmpty'), trigger: 'change' }
          // ],
          // identityCardFront: [
          // // { required: true, message: this.$i18n.t('shopProcess.identityCardFrontNotEmpty'), trigger: 'change' }
          // ],
          // identityCardLater: [
          // // { required: true, message: this.$i18n.t('shopProcess.identityCardLaterNotEmpty'), trigger: 'change' }
          // ]
        },
        serviceList: [],
        // 省市区
        currentAddr: [], // 选中地址
        addrList: [],
        addrListTreeProps: {
          value: "areaId",
          label: "areaName",
          children: "areas",
          lazy: true,
          lazyLoad: this.lazyLoad,
        },
        currentFlag: false,

        // 店铺工商信息
        companyInfoForm: {
          creditCode: "",
          firmName: "",
          residence: "",
          representative: "",
          capital: "",
          foundTime: "",
          startTime: "",
          endTime: "",
          // businessScope: '',
          // businessLicense: '',
          // identityCardFront: '',
          // identityCardLater: '',
        },
        endTimeFlag: true,
        // 店铺业态类别
        signingInfo: {
          contractStartTime: "", // 签约起始时间
          contractEndTime: "", // 签约终止时间
          type: "", // 店铺类型 0普通店铺 1优选好店
        },
        pickerOptions: {
          disabledDate(time) {
            const date = moment().add(0, "days").startOf("days");
            return time.getTime() >= date.valueOf();
          },
        },
        companyInfoRule: {
          businessLicense: [
            {
              required: true,
              message: this.$i18n.t("shopProcess.businessLicenseNotEmpty"),
              trigger: "change",
            },
          ],
          identityCardFront: [
            {
              required: true,
              message: this.$i18n.t("shopProcess.identityCardFrontNotEmpty"),
              trigger: "change",
            },
          ],
          identityCardLater: [
            {
              required: true,
              message: this.$i18n.t("shopProcess.identityCardLaterNotEmpty"),
              trigger: "change",
            },
          ],
        },
        // 自增签约承租商信息
        customizeBrandList: [],

        // 店铺财务信息
        settlementAccounts: [],

        // 定位
        show: false,
        center: {
          lng: 113.327955,
          lat: 23.136783,
        },
        center2: {
          lng: 113.327955,
          lat: 23.136783,
        },
        zoom: 18,
        baiduIndex: false,
        outletSetList: {
          customFreightAmount: "",
          customProd: "",
          customRenovation: "",
          customSales: "",
        },
        shopLocationProps: {
          label: "name",
          value: "id",
        },
        shopLocationOptions: [], //商铺位置
        brandTagList:[]

      };
    },
    created() {
      // 查询基本信息
      this.switchNav(0);
    },

    mounted() {
      this.queryShopLocation();
      this.getBrandTagChooseList()

    },

    methods: {
       /**
       * /platform/brandTag/choose-list
       */
      getBrandTagChooseList(){
        // /platform/brandTag/choose-list
        this.$http({
          url: this.$http.adornUrl(
            `/platform/brandTag/choose-list`
          ),
          method: "get",
          params: this.$http.adornParams(),
        }).then(({ data }) => {
          if (data) {
            this.brandTagList = data;
          }
        });
      },
      /**
       * 图片的值发生改变，重新校验该表单项
       */
      imgsChange(url) {
        console.log("this.shopBasicInfo.shopLogo", this.shopBasicInfo.shopLogo);
        this.shopBasicInfo.shopLogo = url
      },
      switchNav(value) {
        this.navStatus = value;
        this.getDataList(value);
        this.$forceUpdate();
      },

      handleShopLocationChange(e) {
        let airportShopAddressObj = {
          airportShopAddressIds: [],
          airportShopAddressNames: [],
        };
        let nodes = this.$refs.CascaderShopLocation.getCheckedNodes(true);
        // 反转数组
        let reverseNames = [];
        let node = nodes[0];
        while (node.parent) {
          reverseNames.push(node.label);
          node = node.parent;
        }
        reverseNames.push(node.label);
        airportShopAddressObj.airportShopAddressNames = reverseNames.reverse();
        airportShopAddressObj.airportShopAddressIds = e;
        this.shopBasicInfo.airportShopAddressObj = airportShopAddressObj;
      },

      // 获取商铺位置集联
      queryShopLocation() {
        this.$http({
          url: this.$http.adornUrl(`/admin/platform/airportStation/treeV2`),
          method: "get",
          params: this.$http.adornParams(),
        }).then(({ data }) => {
          this.shopLocationOptions = data;
          console.log("shopLocationOptions", this.shopLocationOptions);
        });
      },

      // 获取门店信息
      getDataList(value = this.navStatus) {
        this.$http({
          url: this.$http.adornUrl("/platform/shop/info/" + this.shopId),
          method: "get",
          params: this.$http.adornParams(),
        }).then(({ data }) => {
          this.brandId = data.shopConfig.brandId;
          if (value === 0) {
            this.shopBasicInfo = data.shopDetail;
            this.shopBasicInfo.serviceIds = data.shopDetail.serviceIds || [];
            this.shopBasicInfo.currentAddr = [
              data.shopDetail.provinceId,
              data.shopDetail.cityId,
              data.shopDetail.areaId,
              data.shopDetail.streetId,
            ];
            if (!this.shopBasicInfo.airportShopAddressObj) {
              this.shopBasicInfo.airportShopAddressObj = {};
            }
            this.shopStatus = data.shopDetail.shopStatus;
            this.currentFlag = true;
            this.getOutletService();
          } else if (value === 1) {
            // this.companyInfoForm = data.company
            this.companyInfoForm = data.company || {};
            // if (data.company && data.company.startTime && data.company.endTime) {
            //   this.companyInfoForm.timeRange = [data.company.startTime, data.company.endTime]
            //   this.timeRange = this.companyInfoForm.timeRange
            // } else {
            //   this.$set(this.companyInfoForm, 'timeRange', [])
            // }
          } else if (value === 2) {
            this.settlementAccounts = data.shopBankCards;
          } else if (value === 3) {
            this.outletSetList = data.shopConfig;
          }
        });
      },
      focusEndTime() {
        this.$refs.endTime.focus();
      },

      // 获取门店服务信息
      getOutletService() {
        this.$http({
          url: this.$http.adornUrl("/shop/provision/list"),
          method: "get",
          params: this.$http.adornParams({
            categoryIds: this.shopBasicInfo.categoryIds,
            status: 1,
          }),
        }).then(({ data }) => {
          this.serviceList = data;
        });
      },

      getShopLogoImgUrl(imgUrl) {
        this.shopBasicInfo.shopLogo = imgUrl;
      },
      // 联级选择器动态加载
      lazyLoad(node, resolve) {
        if (node.level === 0) {
          this.$http({
            url: this.$http.adornUrl(`/admin/area/list`),
            method: "get",
            params: this.$http.adornParams({ level: 1 }),
          }).then(({ data }) => {
            resolve(data);
          });
        } else {
          this.$http({
            url: this.$http.adornUrl(`/admin/area/listByPid`),
            method: "get",
            params: this.$http.adornParams({ pid: node.value }),
          }).then(({ data }) => {
            let nodes = data.map((item) => {
              return {
                ...item,
                leaf: item.level >= 4,
              };
            });
            // 通过调用resolve将子节点数据返回，通知组件数据加载完成
            resolve(nodes);
          });
        }
      },
      /**
       * 监听地址改变
       */
      handleAddrChange(value) {
        if (value.length > 0) {
          const labels =
            this.$refs["cascaderAddr"].getCheckedNodes()[0].pathLabels;
          this.shopBasicInfo.province = labels[0];
          this.shopBasicInfo.provinceId = value[0];
          this.shopBasicInfo.city = labels[1];
          this.shopBasicInfo.cityId = value[1];
          this.shopBasicInfo.area = labels[2];
          this.shopBasicInfo.areaId = value[2];
          this.shopBasicInfo.street = labels[3];
          this.shopBasicInfo.streetId = value[3];
          this.mapLocation(true);
        }
      },
      handler({ BMap, map }) {
      this.baiduIndex = true;
      this.center = { ...this.center2 };
    },
    /** **************** 地图相关 ****************/
    /**
     * 初始化地图数据
     */
    setCenter() {
      this.center = null;
      this.center = {
        lng: 121.844124,
        lat: 31.147095,
      };
      this.zoom = 18;
    },
    /**
     * 获取地图移动后回调的位置参数
     */
    syncCenterAndZoom(e) {
      this.setCenter();
      const { lng, lat } = e.target.getCenter();
      this.center.lng = lng;
      this.center.lat = lat;
      this.zoom = e.target.getZoom();
      this.shopBasicInfo.shopLng = lng;
      this.shopBasicInfo.shopLat = lat;
    },
    /**
     * 关闭地图说明标签
     */
    infoWindowClose() {
      this.show = false;
    },
    /**
     * 打开地图说明标签
     */
    infoWindowOpen() {
      this.show = true;
    },

      shopAddressChange() {
        this.mapLocation(true);
      },
      /**
       * 营业时间赋值
       */
      handleTimeData(date) {
        // 单纯视图更新无限改用强制刷新this.$forceUpdate()
        this.$set(this.companyInfoForm, "timeRange", [date[0], date[1]]);
        this.$forceUpdate();
        this.companyInfoForm.startTime = date[0];
        this.companyInfoForm.endTime = date[1];
      },

      /**
       * 注册资本输入框校验
       */
      changeNum() {
        const capital = this.companyInfoForm.capital;
        this.companyInfoForm.capital = this.checkInput(capital);
        if (Number.parseFloat(this.companyInfoForm.capital) === 0) {
          this.companyInfoForm.capital = 0;
        }
        if (Number.parseFloat(this.companyInfoForm.capital) > 99999999) {
          this.companyInfoForm.capital = 99999999;
        }
      },
      /**
       * input输入框只允许输入正数和小数(保留小数点后两位)
       */
      checkInput(num) {
        if (num) {
          var tmpVal = num.replace(/[^\d^\\.]/g, "");
          var reg = /^(0|([1-9]\d*))(\.\d{1,2})?$/; // 最多允许后输入两位小数
          if (!reg.test(tmpVal)) {
            tmpVal = tmpVal + "";
            tmpVal = tmpVal.substring(0, tmpVal.indexOf(".") + 3);
            var n = tmpVal.split(".").length - 1;
            if (n > 1) {
              tmpVal = tmpVal.substring(0, tmpVal.indexOf("."));
            }
          }
          return tmpVal;
        } else {
          return "";
        }
      },
      /**
       * 输入框不允许输入'-'或'+'
       */
      channelInputLimit(e) {
        const key = e.key;
        if (key === "-" || key === "+") {
          e.returnValue = false;
          return false;
        }
        return true;
      },

      /**
       * 获取图片路径
       */
      getImgSrc(img) {
        if (!img) {
          return "";
        }
        if (img.indexOf("http://") === 0 || img.indexOf("https://") === 0) {
          return img;
        }
        return this.resourcesUrl + img;
      },

      // 更新信息
      updateShopInfo() {
        let dataForm = "";
        let data = {};
        let message = "";
        if (this.navStatus === 0) {
          data = {
            shopDetail: this.shopBasicInfo,
            shopId: this.shopId,
          };
          dataForm = "shopBasicInfo";
          message = this.$i18n.t("shopProcess.baseInfoUpdateSuccess");
        } else if (this.navStatus === 1) {
          data = {
            company: this.companyInfoForm,
            shopId: this.shopId,
          };
          dataForm = "companyInfoForm";
          message = this.$i18n.t("shopProcess.businessInfoUpdateSuccess");
        } /* else if (this.navStatus === 3) {
            data = {
              shopId: this.shopId,
              shopConfig: this.outletSetList
            }
            dataForm = 'shopSetForm'
            message = this.$i18n.t('outlet.permissionSetSuccess')
          } */
        this.$refs[dataForm].validate((valid) => {
          if (!valid) {
            return;
          }
          this.$http({
            url: this.$http.adornUrl("/platform/shop"),
            method: "put",
            data: this.$http.adornData(data),
          }).then(() => {
            this.$message({
              message,
              type: "success",
              duration: 1000,
            });

            this.getDataList();
          });
        });
      },
    },
  };
</script>

<style lang="scss" scoped>
  .app-container.shop-detail .shop-info-box .basic-info-box .busin-time {
    display: flex;
    ::v-deep .el-form-item--small.el-form-item {
      margin: 0;
    }
  }
  .app-container {
    margin-bottom: 30px;
  }
  .app-container.shop-detail {
    font-size: 14px;
    color: #333;
    .head-title {
      margin-bottom: 15px;
    }

    .red-tag-txt {
      color: #ff4949;
    }

    // 导航栏
    .nav-box {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      width: 100%;
      .nav {
        position: relative;
        display: inline-block;
        display: flex;
        white-space: nowrap;
        .nav-item {
          margin: 0;
          font-size: 14px;
          line-height: 1em;
          padding: 15px 20px;
          color: #333;
          cursor: pointer;
        }
        .nav-item.active {
          color: #155bd4;
          // background: rgba(24,144,255, 0.06);
          border-radius: 4px 4px 0 0;
          border-bottom: 2px solid #155bd4;
        }
      }
    }
    .nav-box::before {
      position: absolute;
      right: 0;
      left: 0;
      bottom: 0;
      border-bottom: 1px solid #f0f0f0;
      content: "";
    }

    .shop-info-box {
      // 公共
      p {
        margin: 0;
      }
      p.tit {
        display: inline-block;
        text-align: right;
      }
      .txt-bold {
        color: #333;
      }
      .asterisk {
        color: red;
        padding-right: 5px;
      }
      .table-box {
        display: block;
        width: 100%;
        margin: 20px 0;
        & >>> .el-table th,
        .el-table td {
          border-color: #f0f0f0;
        }
        & >>> .el-table__body-wrapper {
          max-height: 245px;
          overflow-y: scroll;
          scrollbar-width: none; /* Firefox */
          -ms-overflow-style: none; /* IE 10+ */
        }
        & >>> .el-table__body-wrapper::-webkit-scrollbar {
          display: none; /* Chrome Safari */
        }
        & >>> .el-table__body {
          width: 100%;
        }
      }

      .img-upload {
        & ::v-deep .plugin-images,
        & ::v-deep .plugin-images .el-upload--picture-card,
        & ::v-deep .el-upload-list,
        & ::v-deep .el-upload-list__item.is-success {
          width: 130px;
          height: 130px;
        }
      }

      // 图片框大小统一
      & >>> .plugin-images {
        display: block;
        width: auto;
        height: 130px;
        img {
          vertical-align: top;
        }
      }
      & >>> .el-upload--picture-card,
      & >>> .el-upload-list--picture-card .el-upload-list__item {
        width: 130px;
        height: 130px;
        line-height: 130px;
        margin: 0;
      }
      & >>> .el-upload-list--picture-card {
        display: block;
        width: auto;
        height: 100%;
      }

      // 表单项下间距
      .ci-wrapper,
      .basic-info-box {
        .el-form-item {
          margin-bottom: 30px;
        }
      }

      .license-content {
        display: flex;
      }
      // 图片示例
      .upload-example {
        display: flex;
        margin-left: 120px;
        .example-box {
          margin-left: 0;
          &:nth-child(2) {
            margin-left: 30px;
          }
        }
      }
      // 示例框
      .example-box {
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 130px;
        height: 130px;
        background: #ffffff;
        border: 1px solid #eaeaea;
        border-radius: 3px;
        box-sizing: border-box;
        margin-left: 30px;
        img {
          display: block;
          width: auto;
          max-width: 100%;
          height: auto;
          max-height: 100%;
        }
        .tips {
          position: absolute;
          left: -1px;
          bottom: 0;
          width: 130px;
          height: 20px;
          line-height: 20px;
          font-size: 12px;
          color: #fff;
          background: rgba(51, 51, 51, 0.5);
          text-align: center;
          border-radius: 0px 0px 3px 3px;
        }
      }

      // 图片
      .tab-img {
        width: 60px;
        height: 60px;
        margin-right: 5px;
        cursor: pointer;
      }

      // 表格上的标题
      .table-data-title {
        display: flex;
        align-items: center;
        .text {
          font-size: 16px;
          min-width: 80px;
          .stress {
            color: #ff2120;
            padding-right: 5px;
          }
        }
        .tips {
          font-size: 12px;
          color: #999;
          margin-left: 10px;
        }
        .edit-btn {
          margin-left: auto;
          cursor: pointer;
        }
      }

      // 基本信息模块
      .basic-info-mod {
        // 审核状态
        .audit-status {
          display: flex;
          align-items: center;
          justify-content: space-between;
          width: 100%;
          background: #f7f8fa;
          padding: 20px;
          line-height: 1em;
          margin-top: 20px;
          color: #333;
          p.tit {
            width: 95px;
          }
          .week {
            color: #666;
          }
        }
        .addr-select {
          display: block;
          width: 100%;
        }
        .bg-img {
          display: flex;
          justify-content: flex-start;
          .business-license-box {
            margin-right: 30px;
            .img-tips {
              display: block;
              text-align: center;
              font-size: 12px;
              color: #666;
              line-height: 1.5em;
              margin-top: 8px;
              p {
                margin: 0;
                padding: 0;
              }
            }
          }
        }
        .id-box {
          margin-bottom: 20px;
          .upload-content {
            .upload-img {
              display: flex;
              align-items: center;
              justify-content: flex-start;
              & >>> .el-form-item {
                margin-bottom: 10px;
              }
              div {
                &:nth-child(2) {
                  margin-left: 30px;
                }
              }
              .disabled-upload {
                & >>> .el-upload {
                  background: #f5f7fa;
                }
              }
            }
            .upload-img.en-upload-img {
              & >>> .el-form-item.is-error {
                margin-bottom: 45px;
              }
            }
            .upload-img.zh-upload-img {
              & >>> .el-form-item.is-error {
                margin-bottom: 22px;
              }
            }
          }
          .upload-tips {
            margin-left: 120px;
          }
        }
        // 信息
        .basic-info-list {
          margin-top: 30px;
          .basic-info-box {
            display: flex;
            align-items: top;
            justify-content: flex-start;
            width: 100%;
            .left-info {
              width: 40%;
              min-width: 300px;
              margin-right: 80px;
              text-align: left;
            }
          }
          .basic-info-item {
            display: flex;
            align-items: center;
            justify-content: flex-start;
            padding: 20px 30px;
          }
          .upload-tips {
            font-size: 12px;
            color: #999;
            height: auto;
            line-height: 1.5em;
            margin-top: 5px;
          }
        }
        .foot-btn {
          margin-left: 120px;
        }
      }
      // 工商信息
      .business-info-mod {
        margin-top: 30px;
        .ci-wrapper {
          // display: flex;
          // justify-content: flex-start;
          // width: 100%;
          .capital-int {
            & >>> .el-input__inner {
              padding-right: 0 !important;
              border-radius: 2px 0 0 2px !important;
            }
          }
          & >>> .el-date-editor.el-input,
          & >>> .el-date-editor.el-input__inner {
            width: 100%;
          }
          & >>> .el-date-editor .el-range-separator {
            width: auto !important;
          }
          .left-info {
            // width: 504px;
            width: auto;
            min-width: 500px;
            max-width: 40%;
            .btn-box {
              display: flex;
              margin-left: 134px;
              margin-bottom: 40px;
              .prev-btn {
                margin-right: 13px;
              }
            }
            // }
            // .right-info {
            // width: 440px;
            // width: 45%;
            // min-width: 300px;
            // max-width: 500px;
            // margin-left: 30px;
            .business-license-box {
              .license-content {
                display: flex;
              }
            }
            .id-box {
              .upload-content {
                margin-bottom: 20px;
                .upload-img {
                  display: flex;
                  div {
                    &:nth-child(2) {
                      margin-left: 20px;
                    }
                  }
                }
                .upload-example {
                  display: flex;
                  margin-left: 150px;
                  .example-box {
                    margin-left: 0;
                    &:nth-child(2) {
                      margin-left: 20px;
                    }
                  }
                }
                .en-upload-example {
                  display: flex;
                  margin-left: 200px;
                  .example-box {
                    margin-left: 0;
                    &:nth-child(2) {
                      margin-left: 20px;
                    }
                  }
                }
                .upload-tips {
                  margin-left: 150px;
                }
              }
            }
            .img-static {
              display: block;
              width: 120px;
              height: 120px;
            }
            .img-static:not(:first-child) {
              margin-left: 20px;
            }

            // 示例框
            .example-box {
              position: relative;
              display: flex;
              justify-content: center;
              align-items: center;
              width: 130px;
              height: 130px;
              background: #ffffff;
              border: 1px solid #eaeaea;
              border-radius: 3px;
              box-sizing: border-box;
              margin-left: 20px;
              img {
                display: block;
                width: auto;
                max-width: 100%;
                height: auto;
                max-height: 100%;
              }
              .tips {
                position: absolute;
                left: -1px;
                bottom: 0;
                width: 130px;
                height: 20px;
                line-height: 20px;
                font-size: 12px;
                color: #fff;
                background: rgba(51, 51, 51, 0.5);
                text-align: center;
                border-radius: 0px 0px 3px 3px;
              }
            }

            .upload-tips {
              font-size: 12px;
              color: #999;
              height: auto;
              line-height: 1.5em;
              margin-top: 10px;
            }

            // 图片上传框样式修改
            & >>> .el-upload {
              display: flex;
              align-items: center;
              justify-content: center;
              width: 120px;
              height: 121px;
              background: #ffffff;
              border: 1px solid #eaeaea;
              border-radius: 3px;
              box-sizing: border-box;
              // img {
              //   width: 120px;
              // }
              .el-icon-plus {
                font-size: 22px;
                color: #eaeaea;
              }
            }
          }
        }
        .foot-btn {
          margin-left: 150px;
        }
        .en-foot-btn {
          margin-left: 200px;
        }
      }
      // 财务信息
      .financial-info {
        margin: 30px 0;
        .table-data-title {
          margin-bottom: 20px;
        }
        .table-box {
          margin-top: 10px;
          & >>> .el-table__body-wrapper {
            height: auto;
            max-height: 100%;
          }
        }
      }
    }

    .serviceBox {
      display: flex;
      flex-wrap: wrap;
    }

    .content-wrap {
      margin-top: 30px;
    }

    .end-time {
      position: relative;
      .text {
        position: absolute;
        left: 30px;
      }
    }
  }

    .map {
    width: 100%;
    height: 300px;
    margin: 6px 0;
  }
</style>
